<template>
  <div class="app-container">
    <div class="app-container-inner">
      <div v-if="userStore.utype == 3">
        <div style="margin-bottom: 2%; margin-left: 2%">
          <el-form :inline="true" :model="queryForm" class="demo-form-inline">
            <el-form-item label="姓名">
              <el-input v-model="queryForm.name" clearable />
            </el-form-item>
            <el-form-item label="学号">
              <el-input v-model="queryForm.num" clearable />
            </el-form-item>
            <el-form-item label="身份">
              <el-select v-model="queryForm.status" placeholder="选择身份" multiple clearable>
                <el-option label="本科生" value="1" />
                <el-option label="硕士生" value="2" />
                <el-option label="博士生" value="3" />
                <el-option label="教职工" value="4" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="query">查询(满足任一条件都将查询出来)</el-button>
            </el-form-item>

            <br />
            <el-form-item label="政治面貌">
              <el-select v-model="queryForm.outlook" placeholder="选择政治面貌" multiple clearable>
                <el-option label="申请入党" value="1" />
                <el-option label="入党积极分子" value="2" />
                <el-option label="入党发展对象" value="3" />
                <el-option label="预备党员接收" value="4" />
                <el-option label="预备党员考察" value="5" />
              </el-select>
            </el-form-item>
            <el-form-item label="当前阶段">
              <el-select v-model="queryForm.period" placeholder="选择当前阶段" multiple clearable>
                <el-option label="递交入党申请书" value="1" />
                <el-option label="党组织派人谈话" value="2" />
                <el-option label="团推优或党员推荐" value="3" />
                <el-option label="党支部会议通过" value="4" />
                <el-option label="上级党委备案" value="5" />
                <el-option label="指定培养联系人" value="6" />
                <el-option label="完成一年培养考察" value="7" />
                <el-option label="发展对象考核推优" value="8" />
                <el-option label="群众座谈会" value="9" />
                <el-option label="确定发展对象" value="10" />
                <el-option label="上级党委备案" value="11" />
                <el-option label="确定入党介绍人" value="12" />
                <el-option label="政治审查" value="13" />
                <el-option label="党校集中培训" value="14" />
                <el-option label="支部委员会审查" value="15" />
                <el-option label="上级党委预审" value="16" />
                <el-option label="填写入党申请书" value="17" />
                <el-option label="支部大会讨论" value="18" />
                <el-option label="上级党委谈话" value="19" />
                <el-option label="上级党委审批" value="20" />
                <el-option label="编入党支部" value="21" />
                <el-option label="入党宣誓" value="22" />
                <el-option label="继续教育考察" value="23" />
                <el-option label="提出转正申请" value="24" />
                <el-option label="支部大会讨论" value="25" />
                <el-option label="上级党委审批" value="26" />
                <el-option label="材料归档" value="27" />
              </el-select>
            </el-form-item>
          </el-form>
        </div>
        <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          :row-key="getRowKeys"
          @selection-change="handleSelectionChange"
          border
        >
          <el-table-column type="selection" :reserve-selection="true" width="50" />
          <el-table-column property="name" label="姓名" width="100" />
          <el-table-column property="num" label="学号/工号" width="150" />
          <el-table-column property="status" label="身份" width="100" />
          <el-table-column property="phone" label="手机号" width="150" />
          <el-table-column property="branch_name" label="所在党支部" width="200" />
          <el-table-column property="period" label="当前阶段" width="150" />
          <el-table-column property="outlook" label="政治面貌" width="120" />
          <el-table-column property="create_date" label="创建时间" />
        </el-table>
        <!--
        <el-pagination
          background
          layout="prev, pager, next"
          style="margin-left: 65%; margin-top: 2%"
          small
          :total="total"
          @current-change="handelCurrentChange"
          v-model:current-page="currentPage"
        />
      -->
      </div>
      <div v-else>
        <Error />
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup name="comprehensive">
  import { ref, onMounted, onUnmounted } from 'vue'
  import { ElMessage } from 'element-plus'
  import watermark from '@/utils/watermark.js'
  import { getCollegeMember, getBranchName } from '@/lafSdkCollection/getPartyMember'
  import { getSettingList } from '@/lafSdkCollection/getSettingInfo'
  import { useUserStore } from '@/store/modules/user'
  import Error from '@/views/error/403.vue'

  const userStore = useUserStore()
  const loading = ref(true)
  const multipleTableRef = ref()
  const select_order_number = ref() //表格select选中的条数
  const select_orderId = ref([]) //表格select复选框选中的id
  const select_order_num = ref([]) //表格select复选框选中的num
  const select_order_period = ref([])
  const select_order_outlook = ref([])
  const multipleSelection = ref([])
  const settingStatus = ref()
  const settingOutlook = ref()
  const settingPeriod = ref()
  const getSetting = async () => {
    const { status, outlook, period } = await getSettingList()
    settingStatus.value = status
    settingOutlook.value = outlook
    settingPeriod.value = period
  }
  //选中的list
  const getRowKeys = (row) => {
    //记录每行的key值
    return row.id
  }
  //当表格选择项发生变化时会触发该事件
  const handleSelectionChange = (val) => {
    // 解决来回切换页面，也无法清除上次选中情况
    multipleSelection.value = val
    select_order_number.value = multipleSelection.value.length
    select_orderId.value = []
    select_order_num.value = []
    select_order_outlook.value = []
    select_order_period.value = []
    if (val) {
      undefined
      val.forEach((row) => {
        undefined
        if (row) {
          undefined
          select_orderId.value.push(row.id)
          select_order_num.value.push(row.num)
          select_order_outlook.value.push(row.outlook)
          select_order_period.value.push(row.period)
        }
      })
    }
  }

  const tableData = ref([])
  const total = ref(0)
  //const currentPage = ref(1)
  const tableDataCopy = ref([])
  /*
  const handelCurrentChange = (page) => {
    currentPage.value = page
    const index = 10 * (currentPage.value - 1)
    const nums = 10 * currentPage.value
    const tables = []
    for (let i = index; i < nums; i++) {
      if (tableDataCopy.value[i]) tables.push(tableDataCopy.value[i])
    }
    tableData.value = tables
  }
*/
  const queryForm = ref({
    name: '',
    num: '',
    status: [],
    period: [],
    outlook: [],
  })
  const query = () => {
    tableData.value = tableDataCopy.value
    if (
      queryForm.value.name == '' &&
      queryForm.value.num == '' &&
      queryForm.value.status.length == 0 &&
      queryForm.value.period.length == 0 &&
      queryForm.value.outlook.length == 0
    ) {
      ElMessage('请先选择搜索条件')
      return
    }
    const judge = {
      name: queryForm.value.name == '' ? false : true,
      num: queryForm.value.num == '' ? false : true,
      status: queryForm.value.status.length == 0 ? false : true,
      period: queryForm.value.period.length == 0 ? false : true,
      outlook: queryForm.value.outlook.length == 0 ? false : true,
    }
    const searchData = []
    if (judge.name) {
      searchData.push({ name: queryForm.value.name })
    }
    if (judge.num) {
      searchData.push({ num: queryForm.value.num })
    }
    if (judge.status) {
      for (let i = 0; i < queryForm.value.status.length; i++) {
        searchData.push({ status: settingStatus.value[parseInt(queryForm.value.status[i])] })
      }
    }
    if (judge.period) {
      for (let i = 0; i < queryForm.value.period.length; i++) {
        searchData.push({ period: settingPeriod.value[parseInt(queryForm.value.period[i])] })
      }
    }
    if (judge.outlook) {
      for (let i = 0; i < queryForm.value.outlook.length; i++) {
        searchData.push({ outlook: settingOutlook.value[parseInt(queryForm.value.outlook[i])] })
      }
    }
    tableData.value = tableData.value.filter((item) => {
      let isShow = searchData.some((prop) => {
        let key = Object.keys(prop)[0]
        let value = prop[key]
        return item.hasOwnProperty(key) && item[key] === value
      })
      return isShow
    })
  }

  const PartyMember = async () => {
    const res = await getCollegeMember()
    let size = res.data.length
    tableDataCopy.value = []
    total.value = size
    console.log(size)
    for (let i = 0; i < size; i++) {
      let baseTime = res.data[i].create_date
      let d = new Date(baseTime)
      let batchDate = d.getFullYear() + '年' + (d.getMonth() + 1) + '月' + d.getDate() + '日'
      let branch_id = res.data[i].info.branch_id
      let branch_name = await getBranchName(branch_id)
      tableDataCopy.value.push({
        name: res.data[i].name,
        num: res.data[i].num,
        status: settingStatus.value[parseInt(res.data[i].info.status)],
        phone: res.data[i].phone,
        branch_name: branch_name,
        period: settingPeriod.value[parseInt(res.data[i].info.period)],
        outlook: settingOutlook.value[parseInt(res.data[i].info.outlook)],
        create_date: batchDate,
      })
    }
    tableData.value = tableDataCopy.value
  }

  const setWaterMark = () => {
    //添加水印
    watermark.set(userStore.college_name, userStore.num)
    //移除水印,传 null 移除水印
    //watermark.close()
  }
  onUnmounted(async () => {
    watermark.close(null)
  })
  onMounted(async () => {
    setWaterMark()
    await getSetting()
    await PartyMember()
    setTimeout(() => {
      loading.value = false
    }, 500)
  })
</script>

<style scoped>
  .edit-input {
    padding-right: 100px;
  }
  .app-container {
    flex: 1;
    display: flex;
    width: 100%;
    padding: 16px;
    box-sizing: border-box;
  }
  .cancel-btn {
    position: absolute;
    right: 15px;
    top: 10px;
  }
</style>
